<template>
	<view class="content">
		<view class="tabs">
			<view class="tab" @tap="choose(index)" :class="active==index?'active':''" v-for="(item,index) in tabs">
				<view style="position: relative;">{{item}}
					<text class="msg" v-if="index==0 && getNotice.count>0">{{getNotice.count}}</text>
					<text class="msg" v-if="index==1 && getLists.count>0">{{getLists.count}}</text>
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="boxs" v-for="(item,index) in villageList" :key="index" @tap="navTo(item)">
			<!-- <view class="boxShuxian"></view> -->
			<view class="boxContent">
				<view class="boxTop">
					<view class="topLeft">{{item.title}}</view>
					<view class="topRight">{{item.createtime_text}}</view>
				</view>
				<view class="boxBottom" v-if="item.content">
					<rich-text class="bottomLeft" :nodes="item.content"></rich-text>
			
				</view>
				<template>
					<template v-if="active==0">
						<view class="unread" v-if="!item.read">
							未读
						</view>
					</template>
				</template>
			</view>
		</view>
		<u-empty v-if="villageList.length == 0" class="nomodel" text="暂无消息通知" mode="list"></u-empty>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				token: '',
				username: '',
				password: '',
				userinfo: {},
				value: '', //搜索关键词
				installList: [], //安装列表
				dosearch: false,
				showAcount: false,
				page: 1,
				villageList: [],
				active: 0,
				last_page: 0,
				tabs: ['当前地区', '全部地区'],
				getNotice: '', //当前地区
				getLists: '', //全部地区
			};
		},
		onLoad() {},
		onShow() {
			uni.getStorage({
				key: 'token'
			}).then(da => {
				this.token = da[1].data
				this.choose(this.active)
			})

		},
		methods: {

			getList() {
				let that = this
				uni.request({
					url: this.$url + 'stop.stop_notice/getList',
					method: 'POST',
					header: {
						token: that.token
					},
					success: (res) => {
						if (res.data.code == 1) {
							that.getNotice = res.data.data
							that.villageList = that.getNotice
						} else {
							that.villageList = []
						}
					}
				})
			},
			notification() {
				let that = this
				uni.request({
					url: this.$url + 'stop.stop_notice/getAllList',
					method: 'POST',
					header: {
						token: that.token
					},
					success: (res) => {
						if (res.data.code == 1) {
							that.getLists = res.data.data
							that.villageList = that.getLists
						} else {
							that.villageList = []
						}
					}
				})
			},
			choose(index) {
				this.active = index
				if (this.active == 0) {
					this.getList()
				} else {
					this.notification()
				}
			},
			navTo(item) {
				this.$navTo('/pages/news/newslist/new_details?id=' + item.id + '&status=2')
			},
			addmsg(id) {
				let that = this
				uni.request({
					url: this.$url + 'notification.notification/addRead',
					method: 'POST',
					header: {
						token: that.token
					},
					data: {
						id: id
					},
					success: (res) => {
						console.log(res);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #F1F1F1;
		min-height: 95vh;
		width: 100%;
	}

	.tabs {
		display: flex;
		align-items: center;
		background: #FFFFFF;

		.tab {
			flex: 1;
			padding: 20rpx;
			text-align: center;
			position: relative;

			.msg {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 76rpx;
				width: 30rpx;
				height: 30rpx;
				color: #FFFFFF;
				background-color: #D10000;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
			}
		}

		.active {
			position: relative;

			&::before {
				content: '';
				width: 100rpx;
				height: 2rpx;
				background-color: #0360D4;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}

	.boxs {
		padding: 20rpx 34rpx;
		background-color: #fff;
		margin: 10rpx 20rpx;
		display: flex;
		border-radius: 10rpx;

		// align-items: center;
		.boxShuxian {
			width: 8rpx;
			height: 28rpx;
			background: #003690;
			border-radius: 4rpx;
			margin-right: 14rpx;
			margin-top: 8rpx;
		}

		.boxContent {
			flex: 1;
			position: relative;

			.boxTop {
				width: 100%;

				// display: flex;
				// justify-content: space-between;
				.topLeft {
					font-size: 32rpx;
					text-align: left;
					color: #333333;
					font-weight: bold;
				}

				.topRight {
					font-size: 28rpx;
					text-align: left;
					color: #999999;
					line-height: 60rpx;
				}
			}

			.boxBottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 0rpx;
				margin-bottom: 8rpx;

				.bottomLeft {
					font-size: 28rpx;
					text-align: left;
					color: #999999;
				}

				.bottomRight {
					width: 66rpx;
					height: 66rpx;
					background: rgba(0, 0, 0, 0);
					border: 1px solid #e5e5e5;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.unread {
				position: absolute;
				top: -4rpx;
				right: 12rpx;
				color: #C72B14;
				font-size: 24rpx;
			}
		}
	}
</style>
